/**
 * 布局组件：
 *  登录之后的首屏布局，顶部导航栏，下方为内容组件，高度限定为 屏幕高度；
 *  默认地图，如果 route.config.ts 中对应路由有map:true，会自动显示地图组件。否则地图设置zIndex=-99隐藏。
 */
import React, {useState} from 'react';
import {Col, Dropdown, Layout, Menu, Row} from "antd";
import {connect} from 'react-redux';
// import logo from 'asserts/logo.png';
import style from './main.module.css';
import {UserProps} from "../Config/auth.config";
import {LeftCircleOutlined, UserOutlined} from '@ant-design/icons'
import {RouteItem} from "./type";
import MenuBase, {getContent} from '../Layouts/base/layout.component'
import ExcelJsSheet from './report/xlsxjs/xlsx.page'
import BpmnView from '../bpmn/bpmn-viewer.page'
import BpmnModdle from '../bpmn/bpmn-moddle.page'
import {ReportRead} from './report/report-read.page'
import {ReportDesigner} from './report/report-design.page';
import ZhuoZhengReport from './zhuozheng-report/zhuozheng.page';

import LyXmlReportPage from './report/ly-report/xml.page';
import PluginLayout from '../Layouts/left-plugin-container.layout/left-plugin-container.layout';

interface MainProps{
  user:UserProps
}
const MainPage=()=> <div style={{zIndex:99}}><>首azfafa页</></div>;

const BasicLayout: React.FC<MainProps> = props => {
  // 菜单分支的key，用来控制 从菜单的 跳转
  const [key, setKey] = useState<string>('main');
  // 右上角 角标的 下拉菜单，用于 退出/修改密码/个人配置 页面的 跳转
  const [actionKey, setActionKey] = useState<string>('');

  const routes:RouteItem[] = [
    {key:'main' ,name:'插件集合',component:<PluginLayout mode={'main'} authorizedKeys={new Set()} initSelectPluginIds={new Set()}/>, icon:<LeftCircleOutlined />},
    {key:'main2' ,name:'刷新',component:<div/>, icon:<LeftCircleOutlined />},
    // {key:'xml-report' ,name:'自定义报表',component:<LyXmlReportPage />, icon:<LeftCircleOutlined />},
    // {key:'xml-report2' ,name:'exceljs',component:<ExcelJsSheet />, icon:<LeftCircleOutlined />},
    // {key:'zhuozheng-report-design' ,name:'卓正报表',component:<ZhuoZhengReport />, icon:<LeftCircleOutlined />},
    // {key:'report-design' ,name:'报表设计',component:<ReportDesigner />, icon:<LeftCircleOutlined />},
    // {key:'report-read' ,name:'报表展示和打印',component:<ReportRead />, icon:<LeftCircleOutlined />},
    // {key:'bpmn' ,name:'流程干',component:<BpmnModdle />, icon:<LeftCircleOutlined />},
    // {key:'bpmnViewer' ,name:'流程看',component:<BpmnView />, icon:<LeftCircleOutlined />},
  ];
  const item = getContent(key,routes);
  return (
    <Layout>
      <Layout.Header className={style.header} >
        <Row justify='space-between' style={{width:'100%'}}>
          <Col >
            <h1 className={style.title}> {process.env.REACT_APP_title}</h1>
          </Col>
          <Col >
            <MenuBase routes={routes} defaultKey={'xml-report'} setKey={setKey} mode={'horizontal'} authInfo={[]}/>
          </Col>
          <Col >
            <Dropdown overlay={ <Menu mode='horizontal'  onClick={({item,key})=>setActionKey(key as string)} >
              <Menu.Item key='m-change-info'>修改个人信息</Menu.Item>
              <Menu.Item key='m-exit'>退出</Menu.Item>
              <Menu.Item key='m-change-password'>修改用户密码</Menu.Item>
            </Menu>}>
                <div ><UserOutlined />李勇</div>
            </Dropdown>
          </Col>
        </Row>
      </Layout.Header>
        <Layout.Content>
          <div style={{zIndex:99}}>
            {item.component}
          </div>
        </Layout.Content>
    </Layout>
  );
};

export default connect(({  user }:{user:UserProps}) => ({user,}))(BasicLayout);
